<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas</title>
</head>

<body>
    <!-- 定义Canvas画布 -->
    <canvas id="myCanvas" width="900" height="300" style="border: 1px solid black"></canvas>
    <script>
        // 访问Canvas画布元素
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        // 1.rect(x,y,width,height) 方法用于创建矩形；参数x指定矩形左上角的x坐标，参数y指定矩形左上角的y坐标，参数width指定矩形的宽度，参数height指定矩形的高度。（Page 6.4）
        ctx.rect(30, 40, 120, 120);
        // stroke()方法用于绘制路径（描边）
        ctx.stroke();

        // 2.fillRect() 创建一个填充颜色的矩形,默认黑色。（Page 6.6）
        ctx.fillStyle = "red"; // fillStyle 定义填充颜色
        ctx.fillRect(160, 40, 120, 120);

        // 3.strokeRect() 方法绘制矩形 （Page 6.7）
        ctx.strokeStyle = "blue"; // strokeStyle 定义轮廓颜色
        ctx.strokeRect(300, 40, 120, 120);

        ctx.fillRect(460, 40, 120, 120);
        // 4.clearRect() 用于清除矩形的一部分 （Page 6.8）
        ctx.clearRect(520, 80, 50, 40);

        // 5.shadowColor 定阴影颜色，shadowBlur 定义模糊级别 （Page 6.12）
        ctx.fillStyle = "pink";
        ctx.shadowColor = "blue";
        ctx.shadowBlur = 30;
        ctx.fillRect(620, 40, 120, 120);
    </script>
</body>

</html>